<template>
  <div class="filter">
    <button
      v-for="(tab, index) in tabs"
      :key="index"
      :class="{ active: currentTab === tab.value }"
      @click="changeTab(tab.value)"
    >
      {{ tab.label }} <span v-if="tab.count !== null">{{ tab.count }}</span>
    </button>
    <div class="floating-bar" v-if="isAnySelected">
      <button class="create-button" @click="toggleSelectAll" style="margin-right: 15px;">
        {{ selectAllLabel || (allSelectedOnPage ? '取消全选' : '本页全选') }}
      </button>
      <button class="create-button" @click="batchDeleteExams" style="margin-right: 15px;">
        {{ batchDeleteLabel || '批量删除' }}
      </button>
    </div>
    <button class="create-button" @click="toggleNewExamMenu">
      {{ newExamLabel || '新建考试' }}
    </button>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';
// 添加对tabs的props声明
defineProps({
  tabs: {
    type: Array,
    required: true
  },
  currentTab: String,
  isAnySelected: Boolean,
  allSelectedOnPage: Boolean,
  selectAllLabel: String,
  batchDeleteLabel: String,
  newExamLabel: String,
});
const emit = defineEmits(['tab-change', 'toggle-select-all', 'batch-delete', 'toggle-new-exam-menu']);
  
const changeTab = (tabValue) => {
  emit('tab-change', tabValue);
};

const toggleSelectAll = () => {
  emit('toggle-select-all');
};

const batchDeleteExams = () => {
  emit('batch-delete');
};

const toggleNewExamMenu = () => {
  emit('toggle-new-exam-menu');
};
</script>

<style scoped>
.filter {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.filter button {
  background: none;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  color: #333;
  transition: background-color 0.3s, color 0.3s;
}

.filter button.active {
  color: #244382;
  border-bottom: 2px solid #244382;
  font-weight: bold;
}

.filter .create-button {
  margin-left: auto;
  background-color: #244382;
  color: #fff;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.filter .create-button:hover {
  background-color: #376edc;
}

.floating-bar{
  width: 50%;
  text-align: right;
}
</style>
